// 类：区域管理页面逻辑（管理表格/表单）
// 方法：初始化、渲染表格、绑定事件

layui.use(['table', 'layer', 'form'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    // 初始化静态数据（仅前端示例）
    var staticAreas = [
        { id: 1, areaName: '华北区域', areaCode: 'HB001', remark: '华北地区项目管理区域', createdAt: '2024-08-01 10:00:00' },
        { id: 2, areaName: '华东区域', areaCode: 'HD001', remark: '华东地区项目管理区域', createdAt: '2024-08-05 09:20:00' },
        { id: 3, areaName: '华南区域', areaCode: 'HN001', remark: '华南地区项目管理区域', createdAt: '2024-08-12 14:30:00' },
        { id: 4, areaName: '西南区域', areaCode: 'XN001', remark: '西南地区项目管理区域', createdAt: '2024-09-01 08:15:00' },
        { id: 5, areaName: '东北区域', areaCode: 'DB001', remark: '东北地区项目管理区域', createdAt: '2024-09-10 16:45:00' },
    ];

    // 渲染表格
    table.render({
        elem: '#areaTable',
        id: 'areaTable',
        height: 'full-160',
        page: false, // 区域管理不分页
        cols: [[
            { field: 'id', title: 'ID', sort: true, align: 'center', width: 80, templet: function (d) { return '<span class="col-id">' + d.id + '</span>'; } },
            { field: 'areaName', title: '区域名称', width: 200 },
            { field: 'areaCode', title: '区域编码', width: 150 },
            { field: 'remark', title: '备注', width: 300 },
            { field: 'createdAt', title: '创建时间', width: 160 },
            { title: '操作', toolbar: '#tplRowActions', fixed: 'right', width: 160 }
        ]],
        data: staticAreas
    });

    // 通用弹窗打开方法（按钮参数化）
    var openLayer = function (options) {
        var idx = layer.open({
            type: 1,
            title: options.title || '弹窗',
            area: options.area || '520px',
            shadeClose: true,
            content: options.content,
            btn: options.btn || ['确定', '取消'],
            yes: function (index, layero) {
                if (typeof options.onYes === 'function') {
                    options.onYes(index, layero);
                } else {
                    layer.close(index);
                }
            },
            btn2: function (index, layero) {
                if (typeof options.onBtn2 === 'function') {
                    return options.onBtn2(index, layero);
                }
                // 返回 undefined 走默认关闭
            },
            end: function () {
                if (typeof options.onEnd === 'function') {
                    options.onEnd();
                }
            },
            success: function () {
                if (typeof options.onSuccess === 'function') {
                    options.onSuccess();
                }
            }
        });
        return idx;
    };

    // 新增/编辑区域（使用参数化按钮）
    var openAreaForm = function (title, data, btns) {
        return openLayer({
            title: title || '添加区域',
            area: '520px',
            content: document.getElementById('tplAreaForm').innerHTML,
            btn: btns && btns.length ? btns : ['保存', '取消'],
            onSuccess: function () {
                if (data) { form.val('areaForm', data); }
            },
            onYes: function (index) {
                // 统一提交拦截（静态示例）
                var formData = form.val('areaForm');
                // 这里只做前端校验提示
                if (!formData.areaName) {
                    layer.msg('请输入区域名称');
                    return;
                }
                layer.msg('保存成功（静态示例）');
                layer.close(index);
            },
            onBtn2: function () { /* 默认关闭 */ }
        });
    };

    // 事件：搜索
    var searchBtn = document.getElementById('btnSearch');
    if (searchBtn) {
        searchBtn.addEventListener('click', function () {
            var searchValue = document.getElementById('searchInput').value;
            
            // 静态示例：显示搜索条件
            if (searchValue) {
                layer.msg('搜索条件：' + searchValue, { icon: 1 });
            } else {
                layer.msg('请输入搜索条件', { icon: 2 });
            }
        });
    }

    // 事件：重置
    var resetBtn = document.getElementById('btnReset');
    if (resetBtn) {
        resetBtn.addEventListener('click', function () {
            document.getElementById('searchInput').value = '';
            layer.msg('已重置搜索条件', { icon: 1 });
        });
    }

    // 事件：添加
    var addBtn = document.getElementById('btnAddArea');
    if (addBtn) {
        addBtn.addEventListener('click', function () { openAreaForm('添加区域'); });
    }

    // 行内工具栏事件
    table.on('tool(areaTable)', function (obj) {
        var data = obj.data;
        var event = obj.event;
        if (event === 'edit') {
            openAreaForm('编辑区域', data, ['保存修改', '取消']);
        } else if (event === 'del') {
            layer.confirm('确认删除该区域？（删除后可能影响关联项目，静态示例）', { icon: 3, title: '删除确认' }, function (index) {
                layer.close(index);
                layer.msg('删除成功（静态示例）');
            });
        }
    });
});
